<template>
    <div class="bgc" @scroll="bgcscroll">
        <!--顶部导航-->
        <div class="top" ref="banner">
            <div>
                <span ref="banner1">南京</span>
                <span ref="banner3" class="fa fa-angle-down"></span>
            </div>
            <div>
            <router-link to="/homesearch">
                <span class="fa fa-search l"></span>
                <input type="text" class="search" placeholder="请输入楼盘名称">
            </router-link>
            </div>
            <div @click="showside">
                <span ref="banner2" class="fa fa-list"></span>
            </div>
        </div>
      <div>
          <img :src="list[0].img" class="pic">
      </div>
      
        <div class="nav-menu">
            <div class="menu">
            <router-link to="/zhuangxiu">
                <div>装修</div>
            </router-link>
            <div class="line"></div>
            <div>理财</div>
            <div class="line"></div>
            <router-link to="/jisuan">
                <div>计算器</div>
            </router-link>
            <div class="line"></div>
            <div>看房团</div>
            <div><span  class="fa fa-angle-down" @click="btnclick"></span></div>
        </div>


        <transition name="in">
            <!--点击显示更多-->
                <div class="menu-list"  v-show="show">
                    <div v-for="a in arr" @click="muneckick">{{a}}</div>
                </div>
        </transition>

      </div>

         <div class="hear">
            <div>
                <router-link :to="'/houselist/'+banner[0].title">
                        <img :src="banner[0].img" class="piclist" >
                        <p>{{banner[0].title}}</p>
                </router-link>
            </div>
                <div>
                    <router-link :to="'/houselist/'+banner[1].title">
                        <img :src="banner[1].img" class="piclist">
                        <p>{{banner[1].title}}</p>
                    </router-link>
                </div>
            
            <div>
                    <img :src="banner[2].img" class="piclist">
                    <p>{{banner[2].title}}</p>
            </div>
            <div>
                    <img :src="banner[3].img" class="piclist">
                    <p>{{banner[3].title}}</p>
            </div>
            <div>
                    <img :src="banner[4].img" class="piclist">
                    <p>{{banner[4].title}}</p>
            </div>
        </div>

      <div class="aa">
            <img :src="list[1].img" class="zixun">
          <div class="right" ref="right">
            <Swiper
                direction="vertical"
                auto
                loop
                height="35px"
                :show-dots="false"
            >
                <SwiperItem v-for="(z,i) in zixun" key="i">
                    <p class="zixuntex">*{{z}}</p>
                </SwiperItem>
            </Swiper>
          </div>
      </div>

      <div>
          <div class="nanjing">
              <span>南京（二手房）</span>
              <span class="fa fa-line-chart fangjia">房价评估</span>
          </div>
      </div>

      <div class="shouse">
            <div class="shouse-left">
            <router-link to="/houseprice">
                <img src="static/pic/20830.jpg" alt="">
            </router-link>
            </div>
            <div class="shouse-right">
            <router-link to="/houseprice">
                <img src="static/pic/27159.jpg" alt="">
            </router-link>
            </div>
      </div>

      <div class="weda">
          <div>
          <router-link to="/wenda">
              <span class="fa fa-commenting-o color1"></span>
              <p>问答</p>
          </router-link>
              
          </div>
          <div>
          <router-link to="/wenda">
                <span class="fa fa-book color1"></span>
                <p>百科</p>
          </router-link>
              
          </div>
          <div>
            <router-link to="/jisuan">
                <span class="fa fa-calculator color1"></span>
                <p>计算器</p>
            </router-link>
          </div>
      </div>

      <div class="houseteam">
            <div class="houseteam-left">
                <div>
                    <img src="/static/pic/home_img_bm.png" style="width:90px;height:30px;padding-left:10px;">
                </div>
                <div class="houseteam-left-left bt">
                    <div>
                    <router-link to="/visitivehouse">
                        <img src="/static/pic/rBEBYFeR0zeADnSWAAAhDSy4k68544.png"style="width:55px;height:55px;margin-top: 14px">
                    </router-link>
                    </div>
                    <div>
                    <router-link to="/visitivehouse">
                        <p class="color2">免费看房</p>
                        <p class="color2 txt1">11月4日</p>
                        <p class="color3 txt1">送买房地图</p>
                    </router-link>
                    </div>
                </div>
            </div>
            <div class="houseteam-right">
                <div>
                    <img src="/static/pic/home_img_tfh.png" style="width:90px;height:30px;margin-left: 8px">
                </div>
                <div class="houseteam-left-left bt">
                    <div>
                        <img src="/static/pic/rBEBYFePSxSAAhAKAAC_QncP3Bo671.png"style="width:55px;height:55px;margin-top: 14px;margin-left: 8px" class="houseteam-left-left-pic">
                    </div>
                    <div>
                        <p class="color2">4万享12万</p>
                        <p class="color2 txt1">独家优惠</p>
                        <p class="color3 txt1">错过不再有</p>
                    </div>
                </div>
            </div>
      </div>

      <!--买新房-->
      <div class="newhouse">
            <p>
                <span class="fa fa-home yy"></span>
                <span class="color2 txt1">买新房</span>
            </p>
            <div class="noehouse-inner">
                
                    <div class="newhouse-left">
                        <router-link to="/yimuliaoran">
                        <span class="oo">一目了然</span>
                        <div class="txt1">南京最新买房政策</div>
                        <div >
                            <img src="/static/pic/rBEBYFkTrheAYvxlAABzvZ1MhaU405.jpg" class="pp">
                        </div>
                        </router-link>
                    </div>
                
                <div class="newhouse-right">
                    <div class="newhouse-right-top">
                        <div>                            
                            <span class="ii">25580元</span>
                            <br>
                            <span class="uu">桥北新盘领销许</span>
                        </div>
                        <div>
                            <img src="/static/pic/rBEBp1g739KAIfL1AAAZ7PRnI74198.png" class="w5h5">
                        </div>
                    </div>
                    <div class="newhouse-right-font">
                        <div>
                            <span class="ii">地价4万5</span>
                            <br>
                            <span class="uu">项目有动静了！</span>
                        </div>
                        <div>
                            <img src="/static/pic/rBEBp1g739KAMq1aAAAUzL9lsxk464.png" class="w5h5">
                        </div>
                    </div>
                </div>
            </div>
      </div>

      <!--买二手房-->
      <div class="secodhouse">
        <div class="secodhouse-top">
            <span class="fa fa-key yy"></span>
            <span class="color2 txt1">买二手房、租房</span>
        </div>
        <div class="secodhouse-info">
            <div class="secodhouse-info-l">
                       <router-link to="/secondhouse">
                            <span class="oo">南京二手房</span>
                            <div class="txt1">政策大全</div>                        
                            <div>
                                <img src="static/pic/rBEBp1i00o-AFLCKAAEmUijLxto340.png" class="pp">
                            </div>
                       </router-link>
            </div>
            <div class="secodhouse-info-r">
                <div class="newhouse-right-top">
                        <div>
                            <span class="ii">25580元</span>
                            <br>
                            <span class="uu">桥北新盘领销许</span>
                        </div>
                        <div>
                            <img src="/static/pic/rBEBYFg74AeAQ9sYAAAYoxmSCuI393.png" class="w5h5">
                        </div>
                    </div>
                    <div class="newhouse-right-font">
                        <div>
                            <span class="ii">地价4万5</span>
                            <br>
                            <span class="uu">项目有动静了！</span>
                        </div>
                        <div>
                            <img src="/static/pic/rBEBYFg739OAFMdMAAAtEP1MqvA582.png" class="w5h5">
                        </div>
                    </div>
            </div>
        </div>
      </div>

      <!--装修-->
      <div class="secodhouse">
        <div class="secodhouse-top">
            <span class="fa fa-paint-brush yy"></span>
            <span class="color2 txt1">装修</span>
        </div>
        <div class="secodhouse-info">
            <div class="secodhouse-info-l">
                    <router-link to="/zhuangxiu">
                        <div>
                            <span class="oo">我要装修</span>
                            <div class="txt1">365装修百变魔方</div>
                        </div>
                        <div>
                            <img src="static/pic/rBEBp1fRExCALgUDAABERxwKDzE722.jpg" class="pp">
                        </div>
                    </router-link>
                   
            </div>
            <div class="secodhouse-info-r">
                <div class="newhouse-right-top">
                        <div>
                            <span class="ii">装修省钱帮</span>
                            <br>
                            <span class="uu">装修小白必选</span>
                        </div>
                        <div>
                            <img src="/static/pic/rBEBp1eR0ziAKJ9eAAAVGIfJAhc729.png" class="w5h5">
                        </div>
                    </div>
                    <div class="newhouse-right-font">
                        <div>
                            <span class="ii">家装大讲堂</span>
                            <br>
                            <span class="uu">畅游样板间</span>
                        </div>
                        <div>
                            <img src="/static/pic/rBEBYFePSxSAL8JOAACI1x4-czw194.png" class="w5h5">
                        </div>
                    </div>
            </div>
        </div>
      </div>

      <div class="home-font">
          <div class="home-font-top">
              <span>关于我们</span>
              <span>联系我们</span>
              <span>违法及不良信举报信息电话：025-86656195</span>
          </div>
          <div class="home-font-bottom">
              <span> ©2006-2017 365淘房 江苏三六五网络股份有限公司 </span>
          </div>
      </div>
      <!--蒙灰层和侧边栏-->
      <transition name="in">
          <div class="side"  v-show="side">
            <Leftside></Leftside>
        </div>
      </transition>
        <transition name="pagein">
            <div class="shaow" v-show="side" @click="disside"></div>
        </transition>
        
    </div>
</template>

<script>
    import {mapState} from 'vuex';
    import axios from 'axios'
    import {Swiper,SwiperItem} from 'vux';
    import Leftside from '../components/Leftside.vue'
    export default{
       computed:{
           ...mapState([
               "banner",
               "list",
               "arr",
               "zixun"
           ]),
       },
       data:function(){
            return{
                show:false,
                side:false,
                userinfo:true,
                avatar:"",
            }
        },
        methods:{
            btnclick:function(){
                this.show = !this.show;
            },
            showside:function(){
                this.side = !this.side;
            },
            disside:function(){
                this.side = false;
            },
            bgcscroll:function(e){
                var banner = this.$refs.banner;
                var banner1 = this.$refs.banner1;
                var banner2 = this.$refs.banner2;
                var banner3 = this.$refs.banner3;
                if(e.target.scrollTop>130){
                    banner.style="background-color: white";
                    banner1.style="color: black";
                    banner2.style="color: black";
                    banner3.style="color: black";
                }else{
                     banner.style="background-color: none";
                     banner1.style="color: white";
                     banner2.style="color: white";
                     banner3.style="color: white";
                }
            },
            muneckick:function(e){
                console.log(e.target.innerHTML);
                if(e.target.innerHTML=="新房"){
                    location.href="/#/houselist/新房"
                }
                if(e.target.innerHTML=="二手房"){
                    location.href="/#/houselist/二手房"
                }
            }
        },
        components:{
            Leftside,
            Swiper,
            SwiperItem
        }
    }
</script>

<style scoped>
a{
    text-decoration: none;
    color: black;
}
.zixuntex{
    font-size: 12px;
    margin-top: 10px;
}
.newhouse p{
    margin: 8px 0;
}
.yy{
    color: #ff722b;
}
.newhouse-right-top{
    display: flex;
    justify-content: space-around;
}
.ii{
    font-size: 14px;
    font-weight: bold;
}
.uu{
    font-size: 10px;
    color: #999999;
}
.newhouse-right-font{
    display: flex;
    justify-content: space-around;
    border-top: 1px solid #eeeeee;
}
.w5h5{
    width: 55px;
    height: 55px;
}
.noehouse-inner{
    display: flex;
}
.newhouse-right{
    border: 1px solid #eeeeee;
    width: 50%;
    text-align: center;
}
.oo{
    background-color: #ff722b;
    font-size: 14px;
    color: white;
    padding: 0 8px;
}
.pp{
    width: 102px;
    height: 86px;
}
.newhouse{
    background-color: white;
    margin-top: 8px;
}
.newhouse-left{
    width: 50%;
    text-align: center;
    border-top: 1px solid #eeeeee;
}
.newhouse p{
    text-align: center;
}
.houseteam-left-left-pic{
    vertical-align: middle;
}
.txt1{
    font-size: 10px;
}
.color2{
    color: #999999;
}
.color3{
      color: #ff722b; 
}
.houseteam-left-left{
    display: flex;
    padding-left:10px;
}
.houseteam{
    display: flex;
    background-color: white;
    margin-top: 8px;
}
.houseteam p{
    margin: 8px 0;
}
.houseteam-left{
    width: 50%;
    border-right: 1px dashed #cccccc;
}
.houseteam-right{
    width: 50%;
}
.bt{
    border-top: 1px solid #eeeeee;
}
.bgc{
    background-color: #F6F6F6;
    height: 100vh;
    overflow: scroll;
}
.color1{
    color: #ff722b;
    font-size: 20px;
}
.weda{
    display: flex;
    justify-content: space-around;
    padding-top: 20px;
    background-color: white;
}
.weda div{
    text-align: center;
}
.weda p{
    font-size: 10px;
}
.shouse{
    display:flex;
    justify-content: space-between;
    background-color: white;
}
.shouse div{
    width: 50%;
    text-align: center;
}
.shouse img{
    width: 140px;
    height: 70px;
    border-radius: 8px;
}
.fangjia{
    display: inline-block;
    margin-top: 7px;
    height: 20px;
    line-height: 20px;
    border: 1px solid black;
    border-radius: 6px;
    margin-right: 8px;
    padding: 0 4px;
}
.nanjing span:nth-of-type(1){
    margin-left: 8px;
}
.nanjing{
    height: 34px;
    line-height: 34px;
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    background-color: white;
    margin-top: 8px;
}

.pic{
    width: 100%;
    height: 140px;
}
.top{
    display: flex;
    justify-content: space-around;
    height: 34px;
    line-height: 34px;
    position: fixed;
    top:0;
    width: 100%;
    z-index:10
}
.top div:nth-of-type(1){
    color: white;
    font-size: 10px;
}
.top div:nth-of-type(2){
    width: 70%;
    position: relative;
    text-align: center;
}
.top div:nth-of-type(3){
    color: white;
    font-size: 20px;
}
.search{
    width: 90%;
    height: 30px;
    padding-left:30px;
    border-radius: 6px;
    border: none;
}
.l{
    position: absolute;
    top:10px;
    left: 20px;
    color: #999999;
}
.nav-menu{
    position: relative;
}
.menu{
    display: flex;
    justify-content: space-around;
    margin: 0;
    padding: 8px 0;
    color: #666666;
    font-size: 12px;
    text-align: center;
    border-bottom: 1px solid #D9D9D9;
    background-color: white;
}
.line{
    border: 1px solid #e3e3e3;
}
.line1{
    box-shadow: -3px 0 2px rgba(0,0,0,0.15);
}
.piclist{
    width: 25px;
    height: 25px;
}
.hear{
    border-top: 1px solid #D9D9D9;
     border-bottom: 1px solid #D9D9D9;
    display: flex;
    justify-content: space-around;
    text-align: center;
    background-color: white;
}
.hear div{
    width: 20%;
    font-size: 10px;
    margin-top: 20px;
}

.zixun{
    width: 38px;
    height: 32px;
    margin: 10px;
}
.aa{
    /*border: 1px solid black;*/
    display: flex;
    justify-content: space-between;
    background-color: white;
}
.right p{
    margin: 0;
}
.right{
 /*border: 1px solid black;*/
 width: 80%;
 height: 50px;
 overflow: hidden;
 padding-top:6px;
}
.menu-list{
   /*border: 1px solid black;*/
   display: flex;
   flex-wrap: wrap;
   text-align: center;
   position: absolute;
   background-color: white;
   overflow: hidden;
   z-index: 20
}
.menu-list div {
    display: inline-block;
    width: 25%;
    background-color: #f5f5f5;
    font-size: 12px;
    color: #666666;
    padding: 8px 10px;
    border-radius: 6px;
    margin: 10px 13px;
}
.side{
    position: absolute;
    top:0;
    height: 100%;
    width: 80%;
    z-index: 50
}
.shaow{
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    top:0;
}
.secodhouse{
    margin-top: 8px;
    background-color: white;
}
.secodhouse-info{
    display: flex;
    padding: 8px;
}
.secodhouse-info-l{
     width: 50%;
    text-align: center;
    padding: 8px;
}
.secodhouse-top{
    text-align: center;
    border-bottom: 1px solid #eeeeee;
    padding: 8px;
}
.secodhouse-info-r{
    padding: 8px;
    width: 50%;
}
.home-font{
    background-color: white;
    margin-top: 8px;
    font-size: 10px;
    text-align: center;
}
.home-font-top{
    border-bottom: 1px  solid black;
    padding: 10px;
}
.home-font-bottom{
    padding: 10px;
}

</style>